<template>
  <div class="app-container">
    <div class="search-box">
      <div class="search-hd">告警提醒</div>
      <div class="search-bd">
        <el-form
          ref="form"
          :model="searchField"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="所属项目">
            <el-select
              v-model="searchField.pname"
              placeholder="请选择项目"
              size="small"
            >
              <el-option
                v-for="(project, index) in deptOptions"
                :key="index"
                :label="project"
                :value="project"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="监控源">
            <el-select
              v-model="searchField.oname"
              placeholder="请选择监控源"
              size="small"
            >
              <el-option
                v-for="(object, index) in resourceOptions"
                :key="index"
                :label="object"
                :value="object"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchField.date"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发起人" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFAddName"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="工单号" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFDocNumber"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="员工号" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.userId"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="流程名" size="small">
            <el-input
              placeholder="请输入内容"
              v-model="searchField.WFProcessName"
              clearable
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="类型">
            <el-select v-model="searchField.type" placeholder="请选择类型" size="small">
              <el-option v-for="ty in typeOptionss" :key="ty.name" :label="ty.name" :value="ty.name"></el-option>
            </el-select>
          </el-form-item>-->
          <el-button
            type="success"
            size="small"
            @click="selectSelectived(searchField)"
            >查询</el-button
          >
          <!--<el-button type="success" size="small">导出</el-button>-->
        </el-form>

        <!-- 处置日志的Dialog弹框 -->

        <el-dialog title="处理日志" :visible.sync="dialogFormVisible">
          <el-form :model="logForm">
            <el-form-item label="处理人" :label-width="formLabelWidth">
              <el-input
                v-model="logForm.hcontact"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理时间" :label-width="formLabelWidth">
              <!--<el-input v-model="logForm.name" autocomplete="off"></el-input>-->
              <template>
                <div class="block">
                  <el-date-picker
                    v-model="logForm.htime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </template>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理标题" :label-width="formLabelWidth">
              <el-input v-model="logForm.HTitle" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理内容" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="logForm.hcontent"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="logForm">
            <el-form-item label="处理结果" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                v-model="logForm.HResult"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handle2(logForm)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 查看业务流程详细信息的dialog框 -->
        <el-dialog
          title="异常信息"
          :visible.sync="dialogVisiblebpm"
          width="50%"
        >
          <el-table
            v-if="show"
            :data="arr"
            height="450"
            border
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="name" label="字段"> </el-table-column>
            <el-table-column prop="val" label="值"> </el-table-column>
          </el-table>
          <p v-else v-for="(item, index) in this.arr" :key="index">
            {{ item }}
          </p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisiblebpm = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisiblebpm = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
    <!--  中间显示区域-->
    <div class="main-box">
      <div class="main-hd">告警提醒</div>
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        max-height="500"
        fit
        highlight-current-row
      >
        <el-table-column label="序号" width="95" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="监控项目"
          prop="mLog.mObject.mProject.name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="监控源"
          prop="mLog.mObject.name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="时间"
          prop="mLog.time"
          align="center"
        ></el-table-column>
        <!--<el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span>{{ getTypeName(scope.row.type) }}</span>
          </template>
        </el-table-column>-->
        <el-table-column
          label="事件名称"
          prop="type"
          align="center"
        ></el-table-column>
        <el-table-column label="事件内容" align="center">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="success"
              @click="showDetail(scope.row)"
              >查看</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="推送地址"
          prop="mLog.mObject.contact"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="ignore(scope.row)"
              >忽略</el-button
            >
            <el-button type="danger" size="mini" @click="handle(scope.row)"
              >处置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          :current-page="searchField.page"
          :page-sizes="[10, 15, 20, 25, 30, 50]"
          :page-size="searchField.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<style>
.el-table .warning-row {
  background: rgb(233, 134, 134);
}
</style>
<script>
import {
  getWarnList,
  findAllProjectName,
  findAllObjectName,
  update,
  updateSelected,
  noticeselectSelected,
} from "@/api/table";

export default {
  data: function () {
    return {
      show: true,
      list: null,
      arr: [],
      deptOptions: [],
      resourceOptions: [],
      dialogVisiblebpm: false,
      handleFiled: {
        id: "",
        isignore: "",
      },
      loading: true,
      typeOptions: [
        {
          id: "0",
          label: "宕机",
        },
        {
          id: "1",
          label: "连接超时",
        },
      ],
      typeOptionss: [
        {
          id: "1",
          name: "服务宕机",
        },
        {
          id: "2",
          name: "连接超时",
        },
      ],
      date: "",
      total: 10,
      searchField: {
        userId: "",
        WFProcessName: "",
        WFAddName: "",
        WFDocNumber: "",
        pname: "",
        oname: "",
        type: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 15,
        date: "",
      },
      dialogFormVisible: false,
      logForm: {
        id: "",
        htime: "",
        hcontact: "",
        hcontent: "",
        isignore: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
    };
  },
  created() {
    this.initListData();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (
        row.name == "wfAuthor" ||
        row.name == "wfAuthorCn" ||
        row.name == "wfCurrentnodeid" ||
        row.name == "wfCurrentnodename"
      ) {
        console.log("1");
        return "warning-row";
      } else {
        return "";
      }
    },
    // 获取类型名称
    getTypeName(type) {
      const arr = this.typeOptions.filter((item) => item.id === type);
      return arr && arr.length > 0 ? arr[0].label : "--";
    },
    // 查看
    showDetail(row) {
      console.log(row);
      this.arr = [];
      this.dialogVisiblebpm = true;
      if (row.mLog.content.slice(1, 2) == "审") {
        this.show = false;
        this.bpmdata = row.mLog.content;
        this.arr = this.bpmdata.split(",");
      } else {
        this.show = true;
        this.bpmdata = JSON.parse(row.mLog.content);
        console.log(this.bpmdata);
        let ary;
        for (let key in this.bpmdata) {
          ary = {};
          if (key != "xmldata") {
            ary.name = key;
            ary.val = this.bpmdata[key];
            this.arr.push(ary);
          }
        }
          this.arr.map((item,index)=>{
          if(item.name=='wfAuthor'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfAuthorCn'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfCurrentnodename'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
          if(item.name=='wfCurrentnodeid'){
            this.arr.unshift(this.arr.splice(index , 1)[0]);
          }
        })
      }
      console.log(this.arr);
    },
    selectSelectived(searchField) {
      console.log(searchField);
      noticeselectSelected(this.searchField).then((res) => {
        this.$message.success("查询成功");
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 忽略
    ignore(row) {
      console.log(row);
      this.handleFiled.id = row.mLogId;
      this.handleFiled.isignore = 1;
      this.open();
    },
    // 处置
    handle(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.logForm.id = row.mLogId;
      this.logForm.isignore = 2;
      console.log;
    },
    initListData() {
      this.loading = true;
      //获取告警提醒
      getWarnList(this.searchField).then((res) => {
        console.log(res);
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
      findAllProjectName().then((res) => {
        console.log(res);
        this.deptOptions = res.data;
        console.log(this.deptOptions);
        this.deptOptions.unshift("");
      });
      findAllObjectName().then((res) => {
        this.resourceOptions = res.data;
        this.resourceOptions.unshift("");
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchField.limit = val;
      this.pagingQuery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(`当前页: ` + val);
      this.searchField.page = val;
      this.pagingQuery();
    },
    // 更新日志
    updateLog(log) {
      console.log(log);
      updateSelected(log).then((res) => {
        console.log(res);
        if (res.flag == true) {
          this.$message.success("告警已忽略");
          this.initListData();
        } else {
          this.$message.error("告警忽略失败");
        }
      });
    },
    // 处理日志的确定请求
    handle2(logForm) {
      console.log(logForm);
      this.dialogFormVisible = false;
      // 向后台发送请求
      update(logForm).then((res) => {
        console.log(res);
        var flag = res.flag;
        if (flag) {
          this.$message.success("处置成功");
          this.logForm = {
            id: "",
            htime: "",
            hcontact: "",
            hcontent: "",
            isignore: "",
          };
          // 重新查询日志
          this.initListData();
        } else {
          this.$message.error("处置失败");
        }
      });
    },
    // 消息提示框信息
    open(row) {
      this.$confirm("此操作将会忽略该条告警信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateLog(this.handleFiled);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消忽略",
          });
        });
    },
    // 分页查询函数
    pagingQuery: function () {
      getWarnList(this.searchField).then((res) => {
        console.log(res);
        this.list = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.redColor {
  color: red;
}

.search-hd {
  border-left: 2px solid #00a73c;
  padding: 10px;
  margin-bottom: 10px;
}

.search-bd {
  .el-button--small {
    margin-top: 3px;
  }
}

.main-box {
  .main-hd {
    height: 40px;
    line-height: 40px;
    background: #00a73c;
    color: #fff;
    padding-left: 10px;
  }

  .page-box {
    padding: 10px;
    text-align: center;
  }
}
</style>
